'use strict';
import React, {Component, PropTypes} from 'react';
import './style.less';

export default class ComponentBox extends Component {
    constructor( props ) {
        super( props );
    }
    render(){
        let style = {
            width:this.props.width,
            height:this.props.height,
        };
        if(this.props.row.bg.length > 0){
            style.backgroundImage = "url("+this.props.row.bg+")"
        }else{
            style.backgroundColor = "#f7f7f7"
        }
        return (
            <div
                className="diy_col"
                onClick={::this.props.onSelectItem}
                style={ style }>
                {
                    this.props.row.title ?
                        <div className="tips" >
                            <div className="inner" >
                                <b> {this.props.row.title}
                                    {
                                        this.props.showBotPannel && this.props.index == this.props.selectIndex ?
                                            <i className={"active"} />:
                                            <i>+</i>
                                    }</b>
                            </div>
                        </div>:null
                }
                {
                    this.props.editMode && this.props.index == this.props.selectIndex ?
                        <div className="editSerial"><i className="se">{this.props.index+1}</i></div>:null
                }
            </div>
        )
    }
}